import { ConfigEnv, defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import fs from 'fs'

//另一个打包分析插件
//是生产环境下的打包分析插件
// npm i vite-plugin-inspect --save-dev
//构建报告插件
//打包环境下生成
import { visualizer } from 'rollup-plugin-visualizer'
//当以一个Vite插件
//定义那些资源需要预加载
const prefectPathOring: string[] = [
  'src/views/Dashboard/dashboard.tsx',
  'src/views/UserList/userList.tsx'
]
//最终传入插件的参数数组
const prefectPath: string[] = []
function getPrefectPath() {
  //得到'dist/.vite/manifest.json'这个绝对路径
  const mainPath = path.resolve('', 'dist/.vite/manifest.json')
  //如果指定路径的文件或目录存在，返回 true，否则返回 false。
  if (fs.existsSync(mainPath)) {
    const res = JSON.parse(fs.readFileSync(mainPath, 'utf-8'))
    prefectPathOring.forEach(item => {
      const pathItem = res[item]?.file
      if (pathItem) {
        prefectPath.push('/' + pathItem)
      }
    })
  }
}
getPrefectPath()
//写一个Vite插件，用于在打包后自动生成预加载资源
export const PrefectLazyPlugin = (pathArr: string[] = []) => {
  //参数是那些资源需要预加载
  return {
    name: 'vite-plugin-prefect-lazy',
    //Vite提供的钩子函数
    transformIndexHtml(html: string) {
      if (!pathArr.length) return
      let prefect = ''
      pathArr.forEach(item => {
        prefect += `<link rel="prefect" href="${item}" as="script" />`
      })
      return html.replace('</head>', `${prefect}</head>`)
    }
  }
}
//之前直接是defineConfig({配置}) 现在改成这样返回一个{配置}
export default defineConfig(({ mode }: ConfigEnv) => {
  //参数mode是环境变量 比如开发环境和生产环境，可以自己在包里设置  "pp": "tsc && vite build --mode pp",
  //话有一个参数是command 是命令 比如serve和build
  /**
   *  Node.js 中的一个全局对象，用于获取当前 Node.js 进程的环境变量。
   * process.cwd()是process 对象的一个方法，用于返回当前 Node.js 进程的工作目录。
   * 工作目录通常是你在命令行中执行 Node.js 脚本时所在的目录。
   */
  // const root = process.cwd()
  /**
   * loadEnv 是 Vite 提供的一个函数，用于加载环境变量。
   * 它会根据指定的模式和根目录来查找并加载相应的环境变量文件。
   * 会在这个目录下查找以 .env 开头的环境变量文件，例如 .env、.env.development、.env.production 等。
   */
  // const env = loadEnv(mode, root)
  // console.log(env)

  return {
    server: {
      proxy: {
        '/api': {
          target: 'https://apifoxmock.com/m1/5809879-5494934-default',
          changeOrigin: true
          // rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    // 配置路径别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    //配置css变量
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    },

    plugins: [
      react(),
      visualizer({
        open: true //构建后自动打开报告
      }),
      PrefectLazyPlugin(prefectPath)
    ],
    build: {
      manifest: true,
      rollupOptions: {
        output: {
          //这样写可以拆分依赖包
          manualChunks: {
            'react-render': ['react', 'react-dom', 'react-router-dom'],
            'antd-render': ['antd']
            //多个组件打包
            // render_user_bao_children: ['/src/views/Login/index.tsx']
          }
          //这样写还可以把node_modules包单独打包成一个文件，拆分的更细致
          // manualChunks(id) {
          //   if (id.includes('node_modules')) {
          //     if(id.includes('react')) return 'vendor-react'
          //     if(id.includes('antd')) return'vendor-antd'
          //     return 'vendor-node-modules'
          //   }
          //   //甚至细致到单独打包每个业务模块
          //   if(id.includes('/views/')){
          //     const moduleName = id.split('views/')[1].split('/')[0]
          //     return `views+${moduleName}`
          //   }
          // }
        }
      }
    }
  }
})
